<route lang="yaml">
  meta:
    title: 待收货
  </route>

<script setup lang="ts">
import type { ElTable } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'

  type StatusType = '待收货' | '待确认' | '已收货'

interface Project {
  id: string
  productId: string
  productName: string
  quantity: number
  supplierName: string
  price: number
  weight: number
  size: string
  status: StatusType
}

const searchKeyword = ref('')
const statusColors: Record<StatusType, 'success' | 'warning' | 'info'> = {
  待收货: 'info',
  待确认: 'warning',
  已收货: 'success',
}

const tableData = ref<Project[]>([
  {
    id: 'P001',
    productId: '1001',
    productName: '笔记本电脑',
    quantity: 50,
    supplierName: '上海电子科技',
    price: 6999.0,
    weight: 2.5,
    size: '35×25×3 cm',
    status: '待收货',
  },
  {
    id: 'P002',
    productId: '1002',
    productName: '无线蓝牙耳机',
    quantity: 200,
    supplierName: '深圳声学设备',
    price: 299.0,
    weight: 0.15,
    size: '8×6×3 cm',
    status: '待收货',
  },
  {
    id: 'P003',
    productId: '1003',
    productName: '智能手表',
    quantity: 150,
    supplierName: '杭州可穿戴设备',
    price: 899.0,
    weight: 0.05,
    size: '4×4×1 cm',
    status: '待收货',
  },
  {
    id: 'P004',
    productId: '1004',
    productName: '办公转椅',
    quantity: 30,
    supplierName: '佛山家具制造',
    price: 599.0,
    weight: 15.8,
    size: '60×60×110 cm',
    status: '待收货',
  },
  {
    id: 'P005',
    productId: '1005',
    productName: '4K显示器',
    quantity: 80,
    supplierName: '京东方科技',
    price: 2499.0,
    weight: 7.2,
    size: '70×40×5 cm',
    status: '待收货',
  },
  {
    id: 'P006',
    productId: '1006',
    productName: '机械键盘',
    quantity: 120,
    supplierName: '雷蛇外设',
    price: 399.0,
    weight: 1.2,
    size: '44×14×4 cm',
    status: '待收货',
  },
  {
    id: 'P007',
    productId: '1007',
    productName: '移动电源20000mAh',
    quantity: 300,
    supplierName: '东莞新能源',
    price: 129.0,
    weight: 0.45,
    size: '15×7×2 cm',
    status: '待收货',
  },
  {
    id: 'P008',
    productId: '1008',
    productName: '蓝牙音箱',
    quantity: 180,
    supplierName: 'JBL音响',
    price: 599.0,
    weight: 1.8,
    size: '20×10×10 cm',
    status: '待收货',
  },
  {
    id: 'P009',
    productId: '1009',
    productName: 'NAS网络存储',
    quantity: 60,
    supplierName: '群晖科技',
    price: 2999.0,
    weight: 3.5,
    size: '16×16×23 cm',
    status: '待收货',
  },
  {
    id: 'P010',
    productId: '1010',
    productName: '投影仪',
    quantity: 45,
    supplierName: '极米科技',
    price: 3999.0,
    weight: 2.9,
    size: '30×30×15 cm',
    status: '待收货',
  },
])
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const selectedRows = ref<Project[]>([])
// 批量确认到待确认状态
async function handleConfirm() {
  try {
    const validSelections = selectedRows.value.filter(item => item.status === '待收货')

    if (validSelections.length === 0) {
      return ElMessage.warning('请至少选择一个待收货的商品')
    }

    await ElMessageBox.confirm(
      `确定要批量确认 ${validSelections.length} 个商品吗？`,
      '批量确认',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      },
    )

    validSelections.forEach((row) => {
      row.status = '待确认'
    })
    multipleTableRef.value?.clearSelection() // 清空选中状态
    ElMessage.success(`已标记 ${validSelections.length} 个商品待确认`)
  }
  catch {
    ElMessage.info('已取消操作')
  }
}

// 单个商品最终确认
async function handleRowConfirm(row: Project) {
  try {
    await ElMessageBox.confirm(
      `确定要完成【${row.productName}】的最终收货确认吗？`,
      '最终确认',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      },
    )

    row.status = '已收货'
    ElMessage.success('商品已确认收货')
  }
  catch {
    ElMessage.info('已取消确认')
  }
}
</script>

<template>
  <div>
    <FaPageMain>
      <div class="mb-4 flex justify-between">
        <div class="button-group">
          <el-button type="primary" @click="handleConfirm">
            <el-icon><Check /></el-icon>
            <span class="ml-1">批量确认</span>
          </el-button>
        </div>

        <div class="search-wrapper">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索商品名称/ID"
            clearable
            style="width: 300px;"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
      </div>

      <div class="table-wrapper">
        <el-table
          :data="tableData"
          row-key="id"
          style="width: 100%;"
          max-height="calc(100vh - 200px)"
          :fit="true"
          stripe
          @selection-change="(rows: Project[]) => selectedRows = rows"
        >
          <el-table-column type="selection" :selectable="(row: Project) => row.status === '待收货'" />
          <el-table-column prop="productId" label="商品ID" />
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="quantity" label="数量" />
          <el-table-column prop="supplierName" label="供应商" />
          <el-table-column prop="price" label="单价">
            <template #default="{ row }">
              ￥{{ row.price.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="weight" label="重量(kg)" width="120" />
          <el-table-column prop="size" label="尺寸" width="150" />

          <el-table-column prop="status" label="状态" width="120">
            <template #default="{ row }">
              <el-tag :type="statusColors[row.status as StatusType]" effect="dark">
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="150" fixed="right">
            <template #default="{ row }">
              <el-button
                v-if="row.status === '待确认'"
                type="primary"
                size="small"
                @click="handleRowConfirm(row)"
              >
                最终确认
              </el-button>
              <span v-else class="text-gray-400">-</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination-wrapper" float-right>
        <el-pagination
          :page-size="20"
          :pager-count="11"
          layout="prev, pager, next"
          :total="1000"
        />
      </div>
    </FaPageMain>
  </div>
</template>

  <style scoped>
  .flex {
    display: flex;
  }

  .justify-between {
    justify-content: space-between;
  }

  .mb-4 {
    margin-bottom: 1rem;
  }

  .ml-1 {
    margin-left: 0.25rem;
  }

  .search-wrapper {
    display: flex;
    justify-content: flex-end;
  }

  .table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #ebeef5;
    border-radius: 4px;
  }

  .pagination-wrapper {
    margin-top: 16px;
  }
  </style>
